import '../CSS/LeftNav.css';

import * as React from 'react';

import * as Global from '../TS/Global';
import * as MyCfg from './MyCfg';

export interface MenuNode {
    NodeName?: string;
    Active?: boolean;
    NodeID?: string;
    NodeChildren?: MenuNode[];
}

export function CreateMenuNode(...prams): MenuNode {

    let tmp: MenuNode = {
        ...prams
    };
    return tmp;
}
interface LeftNavBarProps extends Global.Myprops {
    MenuList?: MenuNode[]

};

interface LeftNavBarState { };

export class LeftNavBar extends React.Component<LeftNavBarProps,
    LeftNavBarState> {

    public handleClick(event: any): void {
        this
            .props
            .OnMessageSendEvent(this, '', "nav", event.currentTarget.getAttribute("data-index"));
        console.log(event.currentTarget.getAttribute("data-index"));
    }
    //用于处理收到的数据
    ReciveMsgEvent(source: any, cmd: string, obj?: any, ...args) {
        if (cmd == 'update') {
            console.log("强制刷新");
            this.forceUpdate();
        } else { }
    }
    componentWillReceiveProps(nextProps) {
        //每次父控件重新绘制,赋值新的props触发
        this.setState({});
    }
    Getbadge(name: string): any {
        try {
            if (Global.LocalType == "zh") {
                var reg_expression = /串口号 \d+/;
            } else
                var reg_expression = /Serial Port \d+/;
            var result = reg_expression.test(name);
            if (result) {

                let index: number = Number.parseInt(name.replace(Global.GetLocal("串口号") + " ", ''));
                let num: number = 0;
                if (MyCfg
                    .mycfg
                    .Serial_cfg[index - 1].IsOn) {
                    MyCfg
                        .mycfg
                        .Serial_cfg[index - 1]
                        .ServiceList
                        .forEach(element => {
                            if (element.IsOn) {
                                num++;
                            }
                        });
                    if (num > 0) {
                        return <span className="badge badge-pill badge-primary">{num}</span>;
                    }

                }


            }
        } catch (error) {
            console.log("计算服务个数出错:" + error);
        }



    }
    public ProcCollapse(arr: MenuNode[], level: number, parent_id: string, keyindex: string): any {
        if (level == 0) {
            return (
                <div className="panel-group" id="accordion">{this.ProcCollapse(arr, 1, null, "")}</div>
            );
        } else if (level == 1) {
            //第一级
            let ltemp = [];
            var Randid = "collapse" + Math.ceil(Math.random() * 350) + "_";
            let i = 0;
            for (let key in arr) {
                i++;
                let thisid = Randid + i;
                //todo::定义元素名称,后台可能要设置为动态的
                keyindex = key;
                ltemp.push(
                    <div className="panel panel-primary">
                        {/*<!-- 利用data-target指定要折叠的分组列表 -->*/}
                        <div
                            className="panel-heading "
                            data-toggle="collapse"
                            data-parent="#accordion"
                            href={`"#${thisid}`}>
                            <h4 className=" panel-title text-center">
                                {arr[key].NodeName}
                            </h4>
                        </div>
                        {/*<!-- .panel-collapse和.collapse标明折叠元素 .in表示要显示出来 -->*/}
                        <div
                            id={thisid}
                            className={`panel-collapse collapse ${i == 1
                                ? 'in'
                                : ''}`}>
                            {this.ProcCollapse(arr[key].NodeChildren, level + 1, null, keyindex)}
                        </div>
                    </div>

                );

            }
            return ltemp;
        } else if (level == 2) {
            var children = [];
            for (let key in arr) {
                let _tkeyindex = keyindex + "-" + key;
                children.push(
                    <button
                        type="button"
                        className="btn btn-default "
                        data-myatt="haha"
                        data-index={`${_tkeyindex}`}
                        onClick={(e) => this.handleClick(e)}
                        style={{
                            'text-align': 'left'
                        }}>{arr[key].NodeName} {this.Getbadge(arr[key].NodeName)}</button>
                );
            }
            // if (Object.keys(arr[key]).length == 0) } 二级菜单为按键列表
            return (

                <div className="btn-group-vertical btn-block">
                    {children}
                </div>

            );

        }
    }
    public render(): JSX.Element {
        var style = {
            color: 'red',
            backgroundColor: {
                value: 'blue',
                important: 'true'
            }
        };
        return this.ProcCollapse(this.props.MenuList, 0, "", "");
    }
}